<template>
  <div class="inOut">
    <header>
      <el-form :model="searchForm">
        <el-form-item>
          <el-input v-model.trim="searchForm.keyword" clearable placeholder="车场名称/车主姓名/订单号" style="width: 230px;" @change="getTableData(1)" />
        </el-form-item>

        <el-form-item>
          <el-input v-model.trim="searchForm.carCardNum" clearable placeholder="入场车牌" />
        </el-form-item>

        <el-form-item>
          <el-select v-model="searchForm.outType" clearable placeholder="选择出场类型" @change="getTableData(1)">
            <el-option label="正常出场" :value="1" />
            <el-option label="异常出场" :value="2" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select v-model="searchForm.orderStatus" clearable placeholder="选择订单状态" @change="getTableData(1)">
            <el-option label="进场" :value="1" />
            <el-option label="出场" :value="2" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select v-model="searchForm.parkSource" clearable placeholder="车场注册来源" @change="getTableData(1)">
            <el-option label="泊链车场" :value="1" />
            <el-option label="中萌车场" :value="2" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-date-picker
            v-model="dateIn"
            type="daterange"
            @change="changeIn"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="进场开始日期"
            end-placeholder="进场结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-date-picker
            v-model="dateOute"
            value-format="yyyy-MM-dd"
            @change="changeOut"
            type="daterange"
            range-separator="至"
            start-placeholder="离场开始日期"
            end-placeholder="离场结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item style="width: 80px;">
          <el-button type="primary" icon="el-icon-search" @click="getTableData(1)">搜索</el-button>
        </el-form-item>

        <el-form-item style="margin-left: 40px;">
          <el-button type="warning" @click="queryShow = true;">停车场查询</el-button>
        </el-form-item>

        <el-form-item style="margin-left: 80px;">
          <div class="bo" />泊链车场
          <div class="mi" />中萌车场
        </el-form-item>
      </el-form>
    </header>

    <section>
      <el-table v-loading="tableLoading" :data="tableData" height="100%" border>
        <el-table-column label="停车场" align="center" min-width="120">
          <template slot-scope="scope">
            <div class="circle" :class="{'active': (scope.row.parkSource)%2}" />
            {{ scope.row.parkName }}
            <el-button icon="el-icon-search" circle style="width: 20px; height: 20px;" @click="showBolianHistory(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="是否无感" align="center" width="80">
          <template slot-scope="scope">
            {{scope.row.isAutopay | autopayFilter}}
          </template>
        </el-table-column>
        <el-table-column prop="orderCode" label="订单号" align="center" width="164" />
        <el-table-column prop="nickname" label="用户" align="center" width="120" />
        <el-table-column prop="carNumber" label="入场车牌" align="center" width="90" />
        <el-table-column label="订单状态" align="center" width="80">
          <template slot-scope="scope">
            {{ scope.row.status | statusFilter }}
          </template>
        </el-table-column>
        <el-table-column prop="inTime" label="入场时间" align="center" width="154" />
        <el-table-column prop="inMsg" label="入场信息" min-width="120" align="center" />
        <el-table-column prop="outTime" label="出场时间" align="center" width="154" />
        <el-table-column prop="outMsg" label="出场信息" align="center" />
        <el-table-column prop="parkingTime" label="停车时长" align="center" width="80" />
        <el-table-column label="停车场月租时间" align="center" width="100">
          <template slot-scope="scope">
            <p>{{ scope.row.parkMonthStartTime | dateFilter }}</p>
            <p>{{ scope.row.parkMonthDueTime | dateFilter }}</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" v-if="scope.row.outTime == null" @click="seeMoney(scope.row)">停车费</el-button>
            <el-button type="warning" size="mini" @click="detailsShow = true;row=scope.row">订单详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <footer>
      <!-- 分页 -->
      <el-pagination
        :hide-on-single-page="true"
        :current-page="searchForm.current"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="10"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        align="center"
        style="margin-top:10px;"
        @size-change="handleSizeChange"
        @current-change="getTableData"
      />
    </footer>

    <el-dialog title="查看详情" :visible.sync="detailsShow" width="80vw" :close-on-click-modal="false" :close-on-press-escape="false">
      <Details v-if="detailsShow" :row="row" />
    </el-dialog>

    <el-dialog :visible.sync="historyShow" width="1100px" :close-on-click-modal="false" :close-on-press-escape="false">
      <History v-if="historyShow" :bolian-com-id="bolianComId" :bolian-park-union-id="bolianParkUnionId" :bolian-park-id="bolianParkId" :order-code="orderCode" :car-number="carNumber" />
    </el-dialog>

    <el-dialog :visible.sync="queryShow" width="800px" :close-on-click-modal="false" :close-on-press-escape="false">
      <parkingQuery v-if="queryShow" />
    </el-dialog>

    <el-dialog :visible.sync="moneyShow" width="400px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="money-box">
        <p>{{moneyData.carCardNum}}</p>
        <p>{{moneyData.duration}}分钟</p>
        <p>{{moneyData.money}}元</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Details from './components/orderDetails.vue'
import History from './components/bolianHistoricalOrder.vue'
import parkingQuery from './components/parkingQuery.vue'
import { formatDate } from '@/utils/formatDate'

export default {
  name: 'InOut',
  components: {
    Details,
    History,
    parkingQuery
  },
  filters: {
    dateFilter(date){
      return date == null ? null : formatDate(new Date(date), 'yyyy-MM-dd')
    },
    statusFilter(status) {
      switch (status) {
        case 1: return '进场';
          break;
        case 2: return '出场';
      }
    },
    outTypeFilter(outType) {
      switch (outType) {
        case 1: return '正常出场';
          break;
        case 2: return '异常出场';
          break;
      }
    },
    payStatusFilter(payStatus) {
      switch (payStatus) {
        case 0: return '待支付';
          break;
        case 1: return '已支付';
          break;
        case 2: return '取消支付';
          break;
        case 3: return '支付失败';
      }
    },
    payTypeFilter(payType) {
      switch (payType) {
        case 1: return '月租卡';
          break;
        case 2: return '时长卡';
          break;
        case 3: return '其他';
      }
    },
    sourceFilter(source) {
      return false
    },
    autopayFilter(status) {
      return status == 0 ? '手动' : '无感'
    }

  },
  data() {
    return {
      searchForm: {
        size: 10,
        current: 1
      },
      moneyData: {},
      dateIn: null,
      dateOute: null,
      tableData: [],
      detailsShow: false,
      moneyShow: false,
      total: null,
      colorShow: false,
      tableLoading: true,
      historyShow: false,
      queryShow: false,
      bolianComId: null,
      bolianParkUnionId: null,
      bolianParkId: null,
      orderCode: null,
      carNumber: null
    }
  },
  mounted() {
    if(this.$route.query.code) {
      this.searchForm.keyword = this.$route.query.code;
    }
    this.getTableData();
  },
  methods: {
    getTableData(page) {
      this.searchForm.current = page == null ? this.searchForm.current : page;
      this.$axios({
        method: 'get',
        url: '/order/orderInfo/getOrderByManage',
        params: this.searchForm
      }).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.tableLoading = false;
      })
    },
    // 分页修改每页显示条数
    handleSizeChange(val) {
      this.searchForm.size = val;
      this.getTableData();
    },
    showBolianHistory(row) {
      this.orderCode = row.orderCode
      this.carNumber = row.carNumber
      this.bolianComId = row.bolianComId
      this.bolianParkUnionId = row.bolianParkUnionId
      this.bolianParkId = row.bolianParkId
      this.historyShow = true
    },

    changeIn(e) {
      this.searchForm.inBeginTime = e[0];
      this.searchForm.inEndTime = e[1];
    },

    changeOut(e) {
      this.searchForm.outBeginTime = e[0];
      this.searchForm.outEndTime = e[1];
    },

    seeMoney(row) {
      this.$axios({
        method: 'get',
        url: '/order/orderInfo/queryCurrOrder',
        params: {orderCode: row.orderCode}
      }).then((res) => {
        if(res.code == 200) {
          this.moneyData = res.data;
          if(res.data.desc) {
            this.$message.warning(res.data.desc)
          }
        } else {
          this.$message.warning(res.desc)
        }
      })
      this.moneyShow = true;
    }
  }
}
</script>

<style scoped>
  .inOut {
    padding: 8px 20px;
    height: 100%;
    width: 100%;
    position: absolute;
  }
  header {
    position: relative;
    height: 90px;
  }
  section {
    height: calc(100% - 140px);
  }
  footer {
    height: 50px;
    width: 100%;
    position: absolute;
    bottom: 0;
  }
  .el-form-item {
    display: inline-block;
    margin: 4px 0;
  }
  .el-input {
    width: 120px;
  }
  .el-select {
    width: 140px;
  }
  .circle {
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
  }
  .active {
    background-color: green;
  }
  
  .bo,
  .mi {
    display: inline-block;
    margin-right: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: green;
  }
  .mi {
    background-color: red;
    margin-left: 10px;
  }

  .money-box {
    text-align: center;
    font-size: 20px;
  }



</style>
